<template>
  <div ref="albums">
    <div class="singerInfo">
      <img
        :src="singerInfo.artist.cover ? singerInfo.artist.cover : singerImg"
      />
      <div class="info">
        <h3>{{ singerInfo.artist.name }}</h3>
        <span>{{ singerInfo.identify.imageDesc }}</span>
        <ul>
          <li>单曲数:{{ singerInfo.artist.musicSize }}</li>
          <li>专辑数:{{ singerInfo.artist.albumSize }}</li>
          <li>MV数:{{ singerInfo.videoCount }}</li>
        </ul>
      </div>
    </div>
    <div class="tab">
      <Tab :tabList="tabList"></Tab>
    </div>
    <div class="main">
      <keep-alive include="SingerSong">
        <router-view></router-view>
      </keep-alive>
    </div>
  </div>
</template>

<script>
import Tab from "@/components/Tab";
import { getSingerDetailAPI, getVideoUrlAPI } from "@/api";
export default {
  name: "Detail",
  components: {
    Tab,
  },
  data() {
    return {
      singerImg: require("@/assets/images/singer.webp"),
      singerInfo: {
        artist: {
          cover: "",
          name: "",
          musicSize: 0,
          albumSize: 0,
        },
        identify: {
          imageDesc: "",
        },
        videoCount: 0,
      },
      tabList: [
        {
          path: "/detail/singersong",
          name: "singersong",
          label: "专辑",
        },
        {
          path: "/detail/singermv",
          name: "singermv",
          label: "MV",
        },
        {
          path: "/detail/singerinfo",
          name: "singerinfo",
          label: "歌手详情",
        },
        {
          path: "/detail/alikesinger",
          name: "alikesinger",
          label: "相似歌手",
        },
      ],
    };
  },
  methods: {
    async getDetail() {
      getSingerDetailAPI({ id: this.id }).then(
        (res) => {
          this.singerInfo = res.data.data;
        },
        (error) => {
          this.errorMsg.innerHTML = "获取歌手信息失败！";
          this.errorMsg.style.display = "block";
          setTimeout(() => {
            this.errorMsg.style.display = "none";
          }, 1000);
        }
      );
    },
  },
  computed: {
    id() {
      return this.$route.query.id;
    },
    errorMsg() {
      return this.$store.state.scroll.error;
    },
  },
  watch: {
    id() {
      this.getDetail();
    },
  },
  mounted() {
    this.getDetail();
  },
};
</script>

<style lang="less" scoped>
.singerInfo {
  width: 95%;
  margin: 20px auto;
  position: relative;
  img {
    width: 175px;
    height: 175px;
    border-radius: 6px;
    margin-left: 10px;
    object-fit: cover;
  }
  .info {
    color: #333;
    position: absolute;
    top: 30px;
    left: 220px;
    h3 {
      margin: 0 0 20px 0;
    }
    span {
      display: block;
      font-size: 13px;
      margin-bottom: 20px;
    }
    ul {
      display: flex;
      li {
        margin-right: 10px;
        font-size: 13px;
      }
    }
  }
}
</style>